<template>
	<SecondTitle title="设备信息" />
	<div class="info">
		<!-- <img src="@img/global/bus4.png" alt="" class="bus" /> -->
		<div class="bus2">
			<div class="title">设备总量</div>
			<div class="number DIN">5168</div>
			<div class="unit">台</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
</script>

<style lang="scss" scoped>
	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34px 50px 44px 50px;
	}
	.bus {
		width: 496px;
		height: 236px;
		background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgb(2, 22, 49) 100%);
	}
	.bus2 {
		width: 583px;
		height: 249px;
		background-image: url(@img/global/bus5.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		position: relative;
		.title {
			position: absolute;
			font-size: 36px;
			left: 200px;
			top: 70px;
		}
		.number {
			position: absolute;
			left: 200px;
			top: 140px;
			font-size: 60px;
			background: linear-gradient(180deg, #ffffff 0%, #7fefff 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		.unit {
			position: absolute;
			font-size: 32px;
			color: rgba(64, 180, 255, 1);
			right: 80px;
			top: 150px;
		}
	}
</style>
